<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="DateTimePicker/datetimepicker_css.js"></script>

<script type="text/javascript">
    var table1;
    var table2;
    
    function init(){
        table1 = document.getElementById("table1");
        table2 = document.getElementById("table2");
        appendTable1();
        appendTable2();
    }
    
    function appendTable1() {
      var row1;
      var cell1;
      row1 = document.createElement("tr");
      cell1 = document.createElement("td");
      cell1.innerText = "a2";
      //cell1.onclick = function(){document.getElementById("input1").value = "a2";};
      cell1.addEventListener("click", function(){document.getElementById("input1").value = "a2";}); 
      row1.appendChild(cell1);
      table1.appendChild(row1);
    }
    
    function appendTable2() {
      var row2;
      var cell2;
      row2 = document.createElement("tr");
      cell2 = document.createElement("td");
      cell2.innerText = "b2";
      cell2.onclick = function(){document.getElementById("input2").value = "b2";};
      //cell2.addEventListener("click", function(){document.getElementById("input2").value = "b2";}); 
      row2.appendChild(cell2);
      table2.appendChild(row2);
    }
    
    function changeColor(elem){
        elem.style.backgroundColor = "blue";
    }
    
    function onkeyupFunction(inputId){
        if(inputId === "input1"){
            document.getElementById("input2").value = "changed by input1";
        }else if(inputId === "input2"){
            document.getElementById("input1").value = "changed by input2";
        }
        
    }


</script>

</head>
 
<body onload="init()">
    
    <input type="text" size="20" id="input1" onkeyup = "onkeyupFunction(this.id)" value="default1">
    <input type="text" size="20" id="input2" onkeyup = "onkeyupFunction(this.id)" value="default2">
     
<table id="table1">
    
<tr><td onclick="changeColor(this)">a1</td></tr>

</table>
        <p>--------------------------------------------</p>
<table id="table2">
    
<tr><td onclick="changeColor(this)">b1</td></tr>
    
</table>
<input type="Text" id="demo1" maxlength="25" size="25"/>
    <img src="DateTimePicker/cal.gif" 
         onclick="javascript:NewCssCal ('demo3','yyyyMMdd','arrow',true,'24')"
         style="cursor:pointer"/>
    
    <div style="text-align:center; margin:150px auto 100px auto;">
     <label for="demo1">Please enter a date here &gt;&gt; </label>
     <input type="Text" id="demo2" maxlength="25" size="25"/>
     <img src="DateTimePicker/cal.gif" onclick="javascript:NewCssCal('demo2')" style="cursor:pointer"/>
   </div>
</body>

</html>